<template>
  <div class="home-index">
    <van-nav-bar class="app-nav-bar">
      <van-button
          to="/search"
          slot="title"
          icon="search"
          type="info"
          class="search-btn"
          round
          size="small">
        搜索
      </van-button>
    </van-nav-bar>
    <van-tabs class="channel-tabs" v-model="active">
      <van-tab  v-for="(channels,index) in channels"
               :title="channels.name"
               :key="channels.id">
        <article-list :channel="channels"/>
      </van-tab>
      <div slot="nav-right" class="zwf"></div>
      <div slot="nav-right"
           @click="isShow=true"
           class="wap-nav-warp">
        <van-icon name="wap-nav"/>
      </div>
    </van-tabs>
    <van-popup
        v-model="isShow"
        position="bottom"
        closeable
        :style="{ height: '100%' }" >
      <channel-edit
          :user-channels="channels"
          :active="active"
          @close="isShow=false"
          @update-active="onUpdateActive"
      />
    </van-popup>
  </div>
</template>

<script>
import {getUserChannels,} from '@/api/user'
import articleList from './components/articleList'
import ChannelEdit from './components/ChannelEdit'
import {getItem} from "@/utils/storage";

export default {
  name: "homeIndex",
  components:{
    articleList,
    ChannelEdit
  },
  data() {
    return {
      channels:[],
      isShow:false,
      active:0
    };
  },
  created() {
    this.loadChannels()
  },
  methods:{
   async loadChannels(){
     let channels=[]
     if(this.user){
       const {data}=await getUserChannels()
       channels=data.data.channels
     }else {
       const localChannels=getItem('user-channels')
       if (localChannels){
         channels=localChannels
       }else {
         const {data}=await  getUserChannels()
         channels=data.data.channels
       }
     }
     this.channels=channels
   },
    onUpdateActive(index){
      this.active=index
    },
  }
}
</script>

<style scoped lang="less">
.home-index{
  /deep/.van-nav-bar__content{
    background-color: #3a8ee6;
  }
  /deep/.van-nav-bar__title{
    max-width: unset;
  }
  .search-btn{
    width: 277px;
    height: 32px;
    background-color: #5babfb;
    border: none;
    .van-icon{
      font-size: 16px;
      color: #ffffff;
    }
    .van-button__text{
      font-size: 14px;
    }
  }
  .van-tab__pane{
    text-align: center;
  }
  .channel-tabs{
    /deep/.van-tabs__line{
      bottom: 20px;
      width: 15px !important;
      height: 3px;
      background-color: #3296fa;
    }
  }
  .zwf{
    width: 33px;
    flex-shrink: 0;
  }
  .wap-nav-warp{
    position: fixed;
    right: 0;
    width: 33px;
    height: 44px;
    line-height: 44px;
    background-color: #fff;
    opacity: .9;
    display: flex;
    justify-content: center;
    align-items: center;
    .van-icon-wap-nav{
      font-size: 24px;
    }
  }
}
</style>